<script>
import * as api from "@/api/OSSManage/index"
import {detail} from "@/api/OSSManage/index";

export default {
  name: "OSSManageTemp",
  data() {
    return {
      formData: {
        name: "",
        accessKey: "",
        secretKey: "",
        bucketName: "",
        remark: "",
      },
      rules: {
        "name": [{required: true, trigger: "blur", message: "请输入名称",}],
        "endpoint": [{required: true, trigger: "blur", message: "请输入地址",}],
        "accessKey": [{required: true, trigger: "blur", message: "请输入accessKey",}],
        "secretKey": [{required: true, trigger: "blur", message: "请输入secretKey",}],
        "bucketName": [{required: true, trigger: "blur", message: "请输入存储桶名称",}],
      },

      collapse: [1],

      dialogType: "add",
    }
  },
  computed: {
    disabled() {
      return this.dialogType === "view";
    }
  },
  methods: {
    add() {
      this.dialogType = "add";
    },
    edit(row) {
      this.dialogType = "edit";
      this.getDetail(row)
    },
    view(row) {
      this.dialogType = "view";
      this.getDetail(row)
    },
    getDetail(row) {
      api.detail({id: row.oid}).then(res => {
        Object.assign(this.formData, res.data.data);
      })
    },
    save() {
      this.$refs["form"].validate(f => {
        if (f) {
          let method = this.dialogType === "add" ? "add" : "update";
          let msg = this.dialogType === "add" ? "新增" : "编辑";
          api[method](this.formData).then(() => {
            this.$message.success(msg);
            this.$emit("refresh");
            this.$emit("removeThisTabs");
          })
        }
      })
    }
  }
}
</script>

<template>
  <div style="width: 100%">
    <el-collapse v-model="collapse">
      <el-collapse-item :name="1" title="基础信息">
        <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="100px" :disabled="disabled">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地址" prop="endpoint">
                <el-input v-model="formData.endpoint"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="accessKey" prop="accessKey">
                <el-input v-model="formData.accessKey"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="secretKey" prop="secretKey">
                <el-input v-model="formData.secretKey"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="存储桶名称" prop="bucketName">
                <el-input v-model="formData.bucketName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="描述">
                <el-input v-model="formData.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>

    <div class="md-component-btns">
      <el-button size="medium" type="primary" @click="save" v-if="!disabled">保存</el-button>
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>
